<template>
	<view class="steper">
		<button size="mini" @click="count++">+</button>
		<input type="text" :value="count">
		<button size="mini" @click="count--">-</button>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				count: this.value,
			}
		},
		methods: {

		},
		created() {
			uni.$on("add", $event => {
				this.count += $event;
			})
		},
		watch: {
			// 监听count的变化发送—个事件给父组件
			// 事件的名称是input，事件的值是this.count
			"count": {
				handler() {
					this.$emit("input", this.count)
				},
				deep: true
			},
			// 监听props 的value值更新 count 值
			"value": {
				handler() {
					this.count = this.value;
				},
				deep: true
			},
		}
	}
</script>

<style lang="less">
	.steper {

		button,
		input {
			display: inline-block;
			width: 120rpx;
			text-align: center;
		}
	}
</style>
